<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fo {
            display: flex;
            flex-direction: column;
            width: 1000px;
        }

        .do {
            display: flex;
            flex-direction: row;
        }
    </style>
</head>

<body>
    <form action="" class="fo">
        this is a form
        <p>11</p>
        <p>
            <!-- 贴了同样的id后，label就可以让name和框体对应 -->
            <label for="username">name:</label>
            <input type="text" id="username">
        </p>
        <p>
            password
            <input type="password">
        </p>
        <!-- 如果不包裹在P中，似乎就无法被视为同一行，是否因为p为block仅占一行？  -->
        name：
        <input type="text">
        <input type="date">
        <input type="color">
        <input type="email">
        <button>yes</button>
        <input type="password">
        <label>
            <!-- 另外一种使用方式 -->
            <input type="radio" name="1">man
        </label>
        <label>
            <input type="radio" name="1" checked>woman
        </label>
        <!-- 设置相同的name就可以互斥，checked表示默认已确认 -->
        <div class="do">
            <input type="checkbox" checked>study
            <input type="checkbox">sleep
        </div>
        <input type="file">
        <select name="" id="">
            <option value="">A</option>
            <option value="" selected>B</option>
        </select>
        <label for=""></label>
        <textarea  name="" id="" cols="10" rows="10"></textarea>
        <!-- <button style="height: 50px;width: 100px;color: aqua;">submit</button> -->
        <h2>123</h2>

    </form>
    <script>
        // function function1() {
        //     const h2 = document.querySelector("textarea");
        //     window.alert("你点击了按钮");
        //     h2.innerHTML = "hello world";
        // }
        function function1(){
            const h1=document.querySelector("h2");
            h2.innerText="hello world"
        }
        document.querySelector("button").onclick = function1;
    </script>
</body>

</html>